<!DOCTYPE html> 
<html> 
	<head> 
	<title>Claim Status</title> 
	    <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet"  href="../js/jquery.mobile/jquery.mobile-1.1.1.css" />
        <script type="text/javascript" src="../js/cordova-2.0.0.js"></script>  
		<script type="text/javascript" src="../js/jquery.mobile/jquery-1.7.2.min.js"></script>
		<script type="text/javascript" src="../js/jquery.mobile/jquery.mobile-1.1.1.js"></script>     	
		<script type="text/javascript" src="../js/claimstatus.js"></script> 
</head> 
<body> 

<div data-role="page" id="claimstatus">
		<div data-role="header" data-theme="b">
			<h1>
				<i>v</i>Mobile
			</h1>
		</div>
		<div data-role="header">
			<a href="#landing" data-icon="arrow-l">Back</a>
			<h1>Claim Status</h1>
		</div>
		<!-- /header -->
		<div data-role="content">
			<ul data-role="listview" id="claimstatus-container">
				<script type="text/javascript">
					for ( var i = 0; i < claims.claimsList.length; i++) {
						var existingDiv = document
								.getElementById("claimstatus-container");
						var listitem = document.createElement('li');
						var str = '<li><a href="#claimstatus">Claim ' + claims.claimsList[i].id + '</a></li>'
						existingDiv.innerHTML += str;
						$(str).appendTo(".ui-page").trigger("create");
					}
				</script>
			</ul>

			<script type="text/javascript">
				var claims = {
					"claimsList" : [ {
						"description" : "Back Ache",
						"id" : 1234,
						"status" : "development",
						"startDate" : "7\/01\/12",
						"duration" : 60
					}, {
						"description" : "PTSD",
						"id" : 2345,
						"status" : "rating",
						"startDate" : "8\/01\/12",
						"duration" : 30
					}, {
						"description" : "Agent Orange Exposure",
						"id" : 3456,
						"status" : "complete",
						"startDate" : "8\/20\/12",
						"duration" : 10
					}

					]
				};
				/*for ( var i = 0; i < claims.claimsList.length; i++) {
					var existingDiv = document
							.getElementById("claimstatus-container");
					var div = document.createElement('div');
					var str = '<div id = "claim'+ i +'" data-role="collapsible" data-theme="c"> <h3> '
							+ claims.claimsList[i].description
							+ '</h3> <ul data-role="listview" data-theme="C"><li>ClaimID: '
							+ claims.claimsList[i].id
							+ '</li><li>Claim Status: '
							+ claims.claimsList[i].status
							+ '</li><li>Claim Start Date: '
							+ claims.claimsList[i].startDate
							+ '</li><li>Claim Duration: '
							+ claims.claimsList[i].duration
							+ ' days</li></ul></div>';
					existingDiv.innerHTML += str;
					$(str).appendTo(".ui-page").trigger("create");
				}*/
			</script>

		</div>
		<!-- /content-->
	</div>
	<!-- /page -->
</body>
</html>